const styles = {}

styles.Content = {
  width: '1024px',
  padding: '20px',
  margin: 'auto',
}

styles.TopicList = {
  width: '800px',
}

styles.TopicItem = {
  width: '100%',
  boxSizing: 'border-box',
  padding: '10px 20px',
  backgroundColor: '#ffffff',
  borderBottom: '1px solid #eeeeee',
  fontSize: '14px',
  color: '#333333',
}

styles.TopicTitle = {
  fontSize: '16px',
  color: '#222222',
  marginBottom: '20px',
}

styles.TopicInfo = {
  display: 'flex',
  flexDirection: 'row',
  '& li': {
    marginRight: '10px',
    '&:last-child': {
      marginRight: 'none',
    }
  },
}

styles.Label = {
  padding: '5px 10px',
  borderRadius: '4px',
  backgroundColor: '#448ef6',
  color: '#ffffff',
  '&.Label-1': {
    backgroundColor: '#ff4d4d',
  },
  '&.Label-2': {
    backgroundColor: '#f6ec66',
  },
  '&.Label-3': {
    backgroundColor: '#ffaaa5',
  },
}

export default styles
